$_img_path: $img_path + 'p5/';
.p5 {
  $marginTop: 40px;
  background: url($_img_path + 'bg5.jpg') no-repeat;
  background-size: 100% 100%;
  @at-root {
    .css_p5_helper {
      height: $marginTop;
    }

    .text_p5_img {
      $origin_width: 540px;
      $origin_height: 90px;
      background: url($_img_path + 'text.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin: 0 auto;
    }

    .content_p5_img {
      $origin_width: 640px;
      $origin_height: 657px;
      background: url($_img_path + 'content.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin: 0 auto;
    }

    .buttons_p5_container {
      margin-top:10px;
      column-count: 2;
      -webkit-column-count: 2;
      -webkit-column-gap: 0px;
      -webkit-column-fill: auto;
      @at-root {
        .column {
          -webkit-column-break-inside: avoid;
          column-break-inside: avoid;
        }
        .camera_p5_img {
          $origin_width:200px;
          $origin_height:140px;
          background:url($_img_path + 'camera.png') no-repeat;
          background-size:$origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          margin:0 auto;
        }

        .progress_p5_img {
          $origin_width:200px;
          $origin_height:127px;
          background:url($_img_path + 'progress.png') no-repeat;
          background-size:$origin_width/2;
          width: $origin_width/2;
          height: $origin_height/2;
          margin:0 auto;
        }
      }
    }
  }
}
